<template>
    <div class="survey">
        <!-- 问卷标题 -->
        <h1 class="survey-title">{{ title }}</h1>

        <!-- 问卷表单 -->
        <el-form ref="form" :model="formData">
            <!-- 遍历题目并根据类型动态渲染组件 -->
            <div v-for="(question, index) in questions" :key="question.id" class="question-item">
                <el-form-item>
                    <!-- 题号和问题文本 -->
                    <p class="question-text">{{ index + 1 }}. {{ question.text }}</p>
                    <!-- 答案组件 -->
                    <div class="answer-container">
                        <component :is="getQuestionComponent(question.type)" v-model="formData[question.id]"
                            :options="question.options || []" :type="question.type === 'shortAnswer' ? 'textarea' : ''"
                            class="answer-input">

                            <!-- 单选和判断题的选项 -->
                            <el-radio v-if="question.type === 'single' || question.type === 'boolean'"
                                v-for="option in question.options" :key="option" :label="option">{{ option }}
                            </el-radio>

                            <!-- 多选题的选项 -->
                            <el-checkbox v-if="question.type === 'multiple'" v-for="option in question.options"
                                :key="option" :label="option">{{ option }}
                            </el-checkbox>

                        </component>
                    </div>
                </el-form-item>
            </div>

            <!-- 提交按钮 -->
            <el-form-item>
                <el-button type="primary" @click="handleSubmit" class="submit-button">提交问卷</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: '我的问卷调查',  // 新增问卷标题
            formData: {},  // 用户提交的答案
            questions: []  // 动态题目数据
        };
    },
    mounted() {
        this.fetchQuestions();
    },
    methods: {
        // 模拟从后台获取问题
        fetchQuestions() {
            // 模拟异步请求
            setTimeout(() => {
                this.questions = [
                    { id: 0, text: '你对这次问卷的看法是什么？', type: 'shortAnswer' },

                    { id: 1, text: '你的性别是？', type: 'single', options: ['男', '女'] },
                    { id: 2, text: '你喜欢哪些编程语言？', type: 'multiple', options: ['JavaScript', 'Python', 'Java', 'C++'] },
                    { id: 3, text: '你对这次问卷的看法是什么？', type: 'shortAnswer' },
                    { id: 4, text: 'Vue.js 是一种前端框架，对吗？', type: 'boolean', options: ['正确', '错误'] },
                    { id: 5, text: '请为你的编程水平打分（1-5分）', type: 'rating' }
                ];
                this.initFormData();
            }, 500); // 模拟延迟请求
        },
        // 初始化 formData，将每个问题的回答初始化为空
        initFormData() {
            this.questions.forEach(question => {
                this.$set(this.formData, question.id, question.type === 'multiple' ? [] : '');
            });
        },
        // 根据题目类型返回相应的组件名称
        getQuestionComponent(type) {
            const components = {
                single: 'el-radio-group',
                multiple: 'el-checkbox-group',
                shortAnswer: 'el-input',
                boolean: 'el-radio-group',
                rating: 'el-rate'
            };
            return components[type] || 'el-input'; // 如果类型未匹配，默认为 'el-input'
        },
        // 提交表单数据
        handleSubmit() {
            console.log('提交的数据：', this.formData);
            this.$message.success('问卷提交成功！');
        }
    }
};
</script>

<style scoped>
/* 全局容器设置为相对宽度并居中显示 */
.survey {
    width: 60%;
    /* 设置问卷的宽度为60% */
    margin: 0 auto;
    /* 使问卷在水平上居中 */
    padding: 2rem 1rem;
    background-color: #ffffff;
    /* 恢复白色背景 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 标题居中对齐并自适应 */
.survey-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2rem;
    font-weight: bold;
}

/* 问题容器及其布局设置为100%宽度 */
.question-item {
    margin-bottom: 2rem;
}

/* 问题文本与答案布局设置 */
.question-text {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.answer-container {
    margin-left: 1.5rem;
    width: 100%;
}

/* 简答题输入框的宽度和自适应性调整 */
.answer-input {
    width: 80%;
    /* 设置简答题输入框为80%的宽度 */
}

/* 提交按钮样式设置 */
.submit-button {
    width: 100%;
    font-size: 1.2rem;
    padding: 0.75rem;
}

/* 使用媒体查询确保小屏幕的可读性 */
@media (max-width: 768px) {
    .survey {
        width: 90%;
        /* 在小屏幕上调整问卷宽度 */
    }

    .survey-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .question-text {
        font-size: 1rem;
    }

    .submit-button {
        font-size: 1rem;
    }

    .answer-input {
        width: 100%;
        /* 在小屏幕上简答题输入框为100%宽度 */
    }
}
</style>